// @ts-nocheck
import MindMap from '@/plugins/mind';
import styles from './index.module.less';
import { make } from '../../utils/dom';
import dom2img from '../../utils/dom2img';

const defaultData = {
    "data": {
        "text": "Nocode/Doc"
    },
    "children": []
}

class Mind {
    static get toolbox() {
        return {
            title: 'Mind',
            icon: `<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 13C9 15.2091 10.7909 17 13 17C14.1046 17 15.1046 16.5523 15.8284 15.8284M9 13H5M9 13C9 11.448 9.88388 10.1025 11.1757 9.43928M5 13C5 13.5523 4.55228 14 4 14C3.44772 14 3 13.5523 3 13C3 12.4477 3.44772 12 4 12C4.55228 12 5 12.4477 5 13ZM19.2929 6.70711C19.1119 6.52614 19 6.27614 19 6C19 5.44772 19.4477 5 20 5C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7C19.7239 7 19.4739 6.88807 19.2929 6.70711ZM19.2929 6.70711L15.8284 10.1716M9.37149 4.92872C9.73983 4.78126 10 4.42101 10 4C10 3.44772 9.55228 3 9 3C8.44772 3 8 3.44772 8 4C8 4.55228 8.44772 5 9 5C9.13127 5 9.25664 4.97471 9.37149 4.92872ZM9.37149 4.92872L11.1757 9.43928M15.8284 15.8284C16.5523 15.1046 17 14.1046 17 13C17 11.8954 16.5523 10.8954 15.8284 10.1716M15.8284 15.8284L19.2929 19.2929M19.2929 19.2929C19.1119 19.4739 19 19.7239 19 20C19 20.5523 19.4477 21 20 21C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19C19.7239 19 19.4739 19.1119 19.2929 19.2929ZM15.8284 10.1716C15.1046 9.44772 14.1046 9 13 9C12.3428 9 11.7227 9.15847 11.1757 9.43928" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>`
        };
    }

    static get isReadOnlySupported() {
        return true;
    }

    constructor({ data, api, config, readOnly }) {
        this.data = {
            ...data
        };

        this.api = api;

        this.readOnly = readOnly;

        this.config = config || {};

        this.wrapper = undefined;
    }

    render() {
        this.wrapper = make('div', styles['cx-custom-mind']);

        const mindEl = make('div', styles.mindBox);
        if (this.readOnly && this.data.url) {
            const img = make('img', null, {
                src: this.data.url
            })
            mindEl.append(img);
            this.wrapper.append(mindEl);
            return this.wrapper;
        }
        this.wrapper.append(mindEl);
        setTimeout(() => {
            const mindMap = new MindMap({
                // @ts-ignore
                el: mindEl,
                enableFreeDrag: true,
                initRootNodePosition: (this.data.data && this.data.children.length > 1) ? ['left', 'center'] : ['center'],
                data: this.data.data ? this.data : defaultData

            });

            if (!this.readOnly) {
                // 创建 清除, 保存按钮
                const controlBox = make('div', styles.controlBox);
                const saveBtn = make('div', styles.saveBtn, { innerText: "保存" });
                const clearBtn = make('div', styles.clearBtn, { innerText: '清除' });
                controlBox.append(clearBtn, saveBtn);
                this.wrapper.append(controlBox);

                // 监听编辑和保存事件
                this.api.listeners.on(saveBtn, 'click', async () => {
                    this.data = mindMap.getData();
                    const url = await dom2img(mindEl);
                    this.data.url = url;
                }, false)

                this.api.listeners.on(clearBtn, 'click', () => {
                    mindMap.setData(defaultData)
                }, false)
            }
        }, 0)

        return this.wrapper;
    }

    save(blockContent) {
        return this.data
    }
}

export default Mind